<template>
	<view>
		<VerticalDanmu :messages="message">
			<productBg :images="dataform.image?dataform.image.split(',').filter(im=>im):[]" :isUp="dataform.isUp" :code="dataform.id"
				:updateTime="dataform.updateTime" :autoplay="true"></productBg>
		</VerticalDanmu>
		<view class="white-bg mb-24 work-info">
			<view class="acea-row row-middle row-between border-b">
				<view class="title">
					<view class="text">{{ dataform.title }}
						<image class="starImg" src="../static/images/star1.png" v-if="!isLove"
							@click="toCollect(!isLove)">
						</image>
						<image class="starImg" src="../static/images/star2.png" v-else @click="toCollect(!isLove)">
						</image>
					</view>
					<view class="acea-row row-middle work-icon">
						<view>
							<image src="../static/images/works_01.png"></image><text>{{ dataform.address }}</text>
						</view>
						<view>
							<image src="../static/images/works_02.png"></image><text>{{ dataform.experience }}年</text>
						</view>
						<view>
							<image src="../static/images/works_03.png"></image><text>{{ dataform.number || 0 }}人</text>
						</view>
					</view>
				</view>
				<view class="price">
					{{ dataform.salary?(dataform.salary.split('-')[0]?dataform.salary.split('-')[0]+'K':'')+(dataform.salary.split('-')[1]?'-'+dataform.salary.split('-')[1]+'K':''):''}}
				</view>
			</view>
			<view class="acea-row  pd-t-b-24 row-between">
				<!-- 浏览、咨询统计 -->
				<view class="acea-row row-middle visit-box  row-between  border-b">
					<view class="visit-advtar" @click="toVisitor">
						<image :src="m.avatar" mode=""
							v-for="(m,ind) in dataform.managementResponse?dataform.managementResponse:[]" :key="ind"
							:style="{left: (20 * ind) + 'rpx'}"></image>
					</view>
				</view>
				<view class="acea-row visit-info row-middle">
					<view @click="toVisitor">{{ dataform.view || 0 }}人浏览</view>
					<view>
						{{dataform.communication &&dataform.communication != 0? dataform.communication : (randomView)}}人咨询
					</view>
				</view>

				<!-- <view>50人感兴趣</view> -->

				<view class="acea-row row-middle row-right share-btns" style="">
					<button open-type="share">
						<image src="../static/images/wechat_icon.png" mode=""></image>
						<!-- <view style="font-size: 23rpx;">微信</view> -->

					</button>
					<button @click="toReport" style="margin-left: 15rpx;">
						<image src="../static/images/report_icon.png" mode=""></image>
						<!-- <view style="font-size: 23rpx;">举报</view> -->
					</button>
				</view>
			</view>
		</view>
		<!-- 职位详情 -->
		<view class="works-detail mb-24 white-bg">
			<view class="title">职位特点</view>
			<view class="acea-row work-types pd-t-b-30 border-b">
				<view class="type" v-for="(item,index) in (dataform.jobMark)" :key="index">{{item}}</view>
			</view>
			<!-- 岗位详情 -->
			<view class="gray-title pd-t-b-30">岗位详情</view>
			<view class="gray-detail">
				{{ dataform.content }}
			</view>
			<!-- 任职要求 -->
			<view class="gray-title pd-t-b-30">任职要求</view>
			<view class="gray-detail">
				{{ dataform.requirements || '' }}
			</view>
		</view>
		<!-- 公司信息 -->
		<view class="works-detail company-info white-bg">
			<view class="title pd-t-b-30">所属公司</view>
			<!-- sanjiao-c -->
			<view class="acea-row row-middle ">
				<!-- <image :src="dataform.images" mode=""></image> -->
				<view class="name">
					<view>{{ dataform.storeName || ''}}</view>
					<!-- <view class="num">
						1000人以上 | 餐饮
					</view> -->
				</view>
			</view>
			<!-- 			<view class="acea-row row-between row-middle pd-t-b-30">
				<view class="title">公司地址</view>
				<view class="address">长沙市岳麓区汽车西站达美中心</view>
			</view> -->
			<!-- 地图 -->
			<!-- <view class="page-section page-section-gap">
				<map style="width: 100%; height: 172px;" id="map" :scale="mapScale" :latitude="dataform.latitude"
					:longitude="dataform.longitude" :markers="covers">
				</map>
			</view> -->
			<!-- <view class="title pd-t-b-30">其他招聘岗位</view> -->
			<!-- <view class="acea-row row-middle row-between works-list pd-t-b-30">
				<view class="item">
					<view class="num">1</view>
					<view class="text">店长</view>
				</view>
				<view class="item">
					<view class="num">2</view>
					<view class="text">服务员</view>
				</view>
				<view class="item">
					<view class="num">1</view>
					<view class="text">厨师</view>
				</view>
				<view class="item">
					<view class="num">1</view>
					<view class="text">前台</view>
				</view>
			</view> -->
		</view>
		<view class="uni-p-b-98"></view>
		<view class="uni-p-b-98"></view>
		<view class="acea-row row-middle row-between footer" v-if="isOpaer">
			<button class="white-btn" open-type="share">分享</button>
			<view class="white-btn"
				@click="toPage('/pages/releases/merchantService/merchantService?categoryOn=6&item='+ JSON.stringify(dataform) )">
				编辑</view>
			<view class="red-btn" @click="closeJob(dataform.opening ==1?0:1)">{{dataform.opening == 1?'开启':'关闭'}} 职位
			</view>
		</view>
		<report :link-id="dataform.id" :types="7" ref="report" />
	</view>
</template>

<script>
	import {
		getRecruitDetailApi,
		RecruitDeletesApi,
		RecruitUpdateApi
	} from '@/api/recruit.js'
	import {
		toPage
	} from '@/filters/commFilter.js'
	import report from "@/pages/details/components/goods_report/report.vue"
	import productBg from '../components/productBg/productBg.vue'
	import VerticalDanmu from '@/pages/details/components/VerticalDanmu/index.vue'
	export default {
		components: {
			report,
			productBg,
			VerticalDanmu
		},
		onLoad(option) {
			if (!option.id) return uni.navigateBack();
			this.id = option.id
			if (option.notEdit) {
				this.isOpaer = false;
			}
			if (option.spread) {

				this.shareInfo.shareId = option.spread
				console.log(this.shareInfo)
			}

			this.getData(Number(option.id))
		},
		data() {
			return {
				title: 'map',
				markerId: '',
				mapScale: 12,
				covers: [],
				dataform: {},
				id: null,
				isOpaer: true,
				isLove: false,
				message: [],
				shareInfo: {
					title: "",
					infoId: "",
					shareId: "",
					infoType: 5
				},
				randomView: Math.floor(Math.random() * (500 - 50 + 1)) + 50
			};
		},
		methods: {
			toPage,
			async getData(id) {
				uni.showLoading({
					title: '加载中'
				})
				try {
					let {
						data
					} = await getRecruitDetailApi(id, this.$location);
					data.jobMark = data.jobMark ? data.jobMark.split('/') : []
					data.salary = data.salary ? (data.salary.split('-')[0] + '-' + data.salary.split('-')[1]) : data
						.salary
					this.dataform = data;
					this.shareInfo.infoId = this.dataform.id;
					this.shareInfo.title = this.dataform.title;
					this.existsIsLove(this.dataform.id)
					this.covers[0] = {
						id: 0,
						name: data.storeName,
						latitude: data.latitude,
						longitude: data.longitude,
						iconPath: '../../../static/images/location_gray.png'
					}
					if (this.dataform.managementResponse) {
						this.dataform.managementResponse.forEach(item => {
							this.message.push({
								content: (item.nickname ? item.nickname : '匿名') + '查看了该信息',
								avatar: item.avatar
							})
						})
					}
					console.log("this.this.message",this.message)
					uni.hideLoading()
				} catch (e) {
					console.log(e)
					//TODO handle the exception
				}
			},
			async closeJob(st) {
				console.log(st)
				let that = this;
				uni.showModal({
					title: '提示',
					content: '是否确认' + (st == 1 ? '关闭' : '开启') + '该招工',
					async success(res) {
						if (res.confirm) {
							try {
								let res = await RecruitUpdateApi({
									id: that.id,
									opening: st
								});
								that.$util.Tips({
									title: (st == 1 ? '关闭' : '开启') + '成功'
								})
								setTimeout(() => {
									uni.navigateBack()
								}, 2000)
							} catch (e) {
								//TODO handle the exception
							}
						} else if (res.cancel) {
							that.$util.Tips({
								title: '取消成功'
							})
						}
					}
				});

			},
			toReport() {
				this.$refs.report.open();
			},
			toVisitor() {
				console.log('--', this.dataform)
				this.dataform.vistype = 5
				uni.navigateTo({
					url: "/pages/aboutUsers/aboutUsers/visitor?data=" + JSON.stringify(this.dataform)
				})
			},
			toCollect(status) {
				// this.isLove = status;
				// console.log('status',status)
				let that = this;
				let d = {
					status,
					type: 5,
					id: that.dataform.id
				}
				if (status) {
					d.title = that.dataform.title
				}
				getApp().globalData.toCollect(d, (res) => {
					that.existsIsLove(res.id);
				})
			},
			existsIsLove(id) {
				let that = this;
				getApp().globalData.existsIsLove({
					id,
					type: 5
				}).then(res => {
					console.log('appExistsLove', res)
					that.isLove = res;
				})
			}
		}
	}
</script>

<style lang="scss">
	@import "../static/css/index.scss";

	.white-bg {
		background: #ffffff;
	}

	.pd-t-b-30 {
		padding: 30rpx 0;
	}

	.mb-24 {
		margin-bottom: 24rpx;
	}

	.work-info {
		padding: 30rpx;

		.title {
			width: 75%;

			.text {
				font-size: 40rpx;
				font-weight: 500;
			}

			.work-icon {
				padding: 24rpx 0;
				font-size: 24rpx;
				font-weight: 400;
				color: rgba(128, 128, 128, 1);

				image {
					width: 32rpx;
					height: 32rpx;
					margin-right: 6rpx;
				}

				view {
					margin-right: 32rpx;
				}
			}
		}

		.price {
			font-size: 36rpx;
			font-weight: 400;
			color: rgba(238, 33, 45, 1);
		}
	}

	.visit {
		font-size: 24rpx;
		font-weight: 400;
		color: rgba(166, 166, 166, 1);
		padding: 30rpx 30rpx 0;

		view {
			margin-right: 42rpx;
		}
	}

	.works-detail {
		padding: 30rpx;

		.title {
			font-size: 36rpx;
			font-weight: 400;
			color: rgba(10, 5, 5, 1);
		}

		.work-types {
			.type {
				font-size: 24rpx;
				font-weight: 400;
				color: rgba(238, 33, 45, 1);
				padding: 10rpx 36rpx;
				border-radius: 10rpx;
				background: rgba(255, 232, 234, 1);
				margin-right: 28rpx;
				margin-bottom: 12rpx;
			}
		}

		.gray-title {
			font-size: 32rpx;
			font-weight: 400;
			color: rgba(128, 128, 128, 1);
		}

		.gray-detail {
			font-size: 28rpx;
			font-weight: 400;
			line-height: 42rpx;
			color: #000;
		}
	}

	.sanjiao-c {
		padding: 18rpx 0;
		position: relative;

		&::after {
			position: absolute;
			top: 50%;
			margin-top: -12rpx;
			right: 0rpx;
			content: '';
			display: block;
			width: 24rpx;
			height: 24rpx;
			border-top: 1px solid rgba(128, 128, 128, 1);
			border-right: 1px solid rgba(128, 128, 128, 1);
			transform: rotate(45deg);
		}
	}

	.company-info {
		image {
			width: 96rpx;
			height: 96rpx;
			border-radius: 50%;
		}

		.name {
			margin-left: 42rpx;
			font-size: 28rpx;
			font-weight: 400;
			line-height: 42rpx;
			color: rgba(0, 0, 0, 1);

			.num {
				font-size: 24rpx;
				font-weight: 400;
				color: rgba(166, 166, 166, 1);
			}
		}

		.address {
			width: 76%;
			font-size: 28rpx;
			font-weight: 400;
			color: rgba(56, 56, 56, 1);
		}
	}

	.works-list {
		.item {
			width: 25%;
			text-align: center;

			.num {
				font-size: 32rpx;
				font-weight: 500;
				line-height: 42rpx;
				color: rgba(0, 0, 0, 1);
			}

			.text {
				font-size: 26rpx;
				font-weight: 400;
				line-height: 42rpx;
				color: rgba(166, 166, 166, 1);
			}
		}

		.item~.item {
			position: relative;

			&::after {
				position: absolute;
				content: '';
				display: block;
				width: 0px;
				height: 60rpx;
				background: rgba(238, 238, 238, 1);
				border: 1px solid rgba(238, 238, 238, 1);
				top: 50%;
				margin-top: -30rpx;
				left: 0;
			}
		}
	}

	.footer {
		width: 100%;
		padding: 30rpx;
		background: #ffffff;
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 9;
	}

	.white-btn {
		width: 30%;
		height: 92rpx;
		opacity: 1;
		border-radius: 10rpx;
		border: 1px solid rgba(238, 33, 45, 1);
		background: #ffffff;
		text-align: center;
		color: rgba(238, 33, 45, 1);
		font-size: 32rpx;
		font-weight: 400;
		line-height: 92rpx;
	}

	.red-btn {
		margin-left: 24rpx;
		width: 30%;
		height: 92rpx;
		opacity: 1;
		border-radius: 10rpx;
		border: 1px solid rgba(238, 33, 45, 1);
		background: rgba(238, 33, 45, 1);
		text-align: center;
		color: #ffffff;
		font-size: 32rpx;
		font-weight: 400;
		line-height: 92rpx;
	}

	.starImg {
		width: 36rpx;
		height: 36rpx;
	}
</style>